﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Rating</title>

    <script type="text/javascript" src="../../lib/js/jquery.min.js"></script>

    <script type="text/javascript" src="../../lib/js/jquery.ui-1.8rc3/js/jquery-ui-1.8rc3.custom.min.js"></script>

    <style type="text/css">
        *
        {
            margin: 0px;
            padding: 0px;
        }
        .ratingIcon
        {
            background-color: pink;
            width: 15px;
            height: 15px;
            display: inline-table;
        }
        .ratingActive_0
        {
            background-color: #EFEFEF;
            background-image: url(img/rate_-2.png);
        }
        .ratingActive_1
        {
            background-color: #CFCFCF;
            background-image: url(img/rate_-1.png);
        }
        .ratingActive_2
        {
            background-color: #AFAFAF;
            background-image: url(img/rate_+1.png);
        }
        .ratingActive_3
        {
            background-color: #9F9F9F;
            background-image: url(img/rate_+2.png);
        }
        .ratingActive_4
        {
            background-color: #7F7F7F;
        }
        .rating
        {
        }
    </style>

    <script type="text/javascript">

        var replaceSelect = function(jObj) {
        }

        jQuery(document).ready(function() {

            var selectedAttr = 'selected';

            var options = {
                parentClassName: 'rating',
                childClassName: '.ratingIcon',
                activeClassPrefix: 'ratingActive_',
                activeClassFunc: function(idx) {
                    return options.activeClassPrefix + idx;
                },
                getRating: function(parent) {
                    return parseInt(parent.attr(selectedAttr));
                },
                setRating: function(parent, rating) {
                    parent.attr(selectedAttr, rating);
                }
            };

            var setRatings = function(ratings) {
                var icons = ratings.find(options.childClassName);

                var selectedRating = options.getRating(ratings);

                if (isNaN(selectedRating)) {
                    for (var i = 0; i < icons.length; ++i) {
                        jQuery(icons[i]).addClass(options.activeClassFunc(i));
                    }
                } else {
                    jQuery(icons[selectedRating]).addClass(options.activeClassFunc(selectedRating));
                }
            };

            var resetRatings = function(ratings) {
                var icons = ratings.find(options.childClassName);

                for (var i = 0; i < icons.length; ++i) {
                    jQuery(icons[i]).removeClass(options.activeClassFunc(i));
                }
            };

            $(options.parentClassName).each(function() {
                var me = $(this);
                setRatings(me);
            });

            $(options.childClassName).mouseover(function() {
                var me = $(this);

                var parent = me.parent();
                resetRatings(parent);

                var siblings = parent.find(options.childClassName);
                var idx = siblings.index(me);

                var className = options.activeClassFunc(idx);

                for (var i = 0; i <= idx; ++i) {
                    jQuery(siblings[i]).addClass(className);
                }
            });

            $(options.childClassName).click(function() {
                var me = $(this);

                var parent = me.parent();

                var siblings = parent.find(options.childClassName);
                var idx = siblings.index(me);

                var currentRating = options.getRating(parent);
                if (currentRating == idx) {
                    options.setRating(parent, '');
                } else {
                    options.setRating(parent, idx);
                }

                setRatings(parent);
            });

            $(options.childClassName).mouseout(function() {
                var me = $(this);

                var parent = me.parent();
                resetRatings(parent);

                var siblings = parent.find(options.childClassName);
                var idx = siblings.index(me);

                var className = options.activeClassFunc(idx);

                for (var i = 0; i <= idx; ++i) {
                    jQuery(siblings[i]).removeClass(className);
                }

                setRatings(parent);
            });
        });
    ;  (function($) {
    })(jQuery);
    </script>

</head>
<body>
    <span class="rating"><span class="ratingIcon"></span><span class="ratingIcon"></span><span class="ratingIcon"></span><span class="ratingIcon"></span></span></span>
    <div>
        <select class="rater">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
        </select>
    </div>
</body>
</html>
